<!-- 头部 -->
<header th:replace="common/top"></header>

<style>
    /* 输入框样式 */
    input[type="text"], input[type="password"], input[type="email"] {
        width: 100%;
        max-width: 120px;
        padding: 6px 10px;
        margin: 6px 0;
        font-size: 14px;
        border: 1.5px solid #a87c5a;
        border-radius: 5px;
        background-color: #fffdfa;
        color: #734012;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    input:focus {
        outline: none;
        border-color: #fccc1c;
        background-color: #fffef4;
        box-shadow: 0 2px 5px rgba(252, 204, 28, 0.15);
    }

    input::placeholder {
        color: #b28e73;
        font-style: italic;
        opacity: 0.8;
    }
</style>

<div id="BackLink">
    <div class="con">
        <a th:href="@{/catalog/index}">Return to Main Menu</a>
    </div>
</div>

<div id="Catalog">
    <form th:action="@{/editAccount}" method="post">

        <table style="width: 40%; margin: 0 auto;">
            <tr><th colspan="2"><h3>User Information</h3></th></tr>

            <tr>
                <td>User ID:</td>
                <td><input type="text" name="username" th:value="${loginAccount.username}" /></td>
            </tr>

            <tr th:if="${signOnMsg != null}">
                <td colspan="2">
                    <p><font color="red" th:text="${signOnMsg}"></font></p>
                </td>
            </tr>

            <tr>
                <td>New password:</td>
                <td>
                    <input type="password" id="password" name="password"
                           th:value="${loginAccount.password}" onblur="checkCode();" />
                    <span id="isProperCode"></span>
                </td>
            </tr>

            <tr>
                <td>Repeat password:</td>
                <td>
                    <input type="password" id="repeatedPassword" name="repeatedPassword"
                           th:value="${loginAccount.password}" onblur="checkRepeatedCode();" />
                    <span id="isRepeatedCode"></span>
                </td>
            </tr>
        </table>

        <div th:insert="account/includeAccountFields :: includeAccountFields"></div>

        <a th:href="@{/account/couponForm(username=${loginAccount.username})}">My Coupons</a>
        <input type="submit" name="editAccount" value="Save Account Information" />
    </form>

    <a th:href="@{/order/listOrders(username=${loginAccount.username})}">My Orders</a>
</div>

<script type="text/javascript" th:src="@{/js/account.js}"></script>
